/*
 * @Author: xiaosihan 
 * @Date: 2024-05-28 09:48:21 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-05-28 19:38:45
 */

// lable2dGroup

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./lable2dGroup.module.less";
import clsx from "clsx";
import homeStore from "@views/home/homeStore";

interface Iprops {
    children?: ReactNode
}
// 2d 标签
export default function Lable2dGroup() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [barDatas, setBarDatas] = useState(homeStore.barDatas);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setBarDatas(homeStore.barDatas);
    }), []);

    return (
        // perspective: 1080.36px;
        <div className={styles.lable2d_group} >
            <div className={styles.lable2d_group_container} id="lable2d_group" >
                <div className={styles.css3d_camera} id="css3d_camera" >
                    {
                        barDatas.map((barData, i) => {
                            return (
                                <div id={barData.name} key={barData.name} className={clsx(styles['provinces-label'], 0 > 4 ? styles.yellow : "")}>
                                    <div className={styles['provinces-label-wrap']}>
                                        <div className={styles.number}>
                                            <span className={clsx(styles.value, "value")} >0</span>
                                            <span className={styles.unit}>万人</span>
                                        </div>
                                        <div className={styles.name}>
                                            <span className={styles.zh}>{barData.name}</span>
                                            <span className={styles.en}>{barData.enName.toLocaleUpperCase()}</span>
                                        </div>
                                        <div className={styles.no}>0</div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            {/* <div className={clsx(styles['provinces-label'], 0 > 4 ? styles.yellow : "")}>
                <div className={styles['provinces-label-wrap']}>
                <div className={styles.number}>
                <span className={styles.value}>20</span>
                        <span className={styles.unit}>万人</span>
                    </div>
                    <div className={styles.name}>
                        <span className={styles.zh}>xxx</span>
                        <span className={styles.en}>xxx</span>
                    </div>
                    <div className={styles.no}>0</div>
                </div>
            </div> */}

        </div >
    );

}